//获取需要操作的标签
var btn = document.querySelector('button[type="button"]');//sign up标签
var username = document.querySelector('[name="username"]');
var password = document.querySelector('[name="password"]');
var repass = document.querySelector('[name="repass"]');
var email = document.querySelector('[name="email"]');
var tel = document.querySelector('[name="tel"]');
var agree = document.querySelector('[name="agree"]');

//点击按钮
btn.onclick = function(){
    //校验数据

    //验证 用户名 是否为空
    if(username.value === ''){
        alert("用户名不能为空");
        return false;
    }
    //校验用户名是否符合规则：3~10，字母开头，数字字母下划线组成
    var reg = /^[a-zA-Z]\w{2,9}$/;
    if(!reg.test(username.value)){
        alert("用户名不符合规范");
        return false;
    }
    // 验证 密码
    if(password.value === ''){
        alert("密码不能为空")
        return false;
    }
    // 密码规则：6~16
    if(!/\d/.test(password.value) || !/[a-zA-Z]/.test(password.value) || !/^.{6,16}$/.test(password.value)){
        alert("密码必须同时包含字母和数字，6~16位")
        return false;
    }
    // 确认密码
    if(repass.value !== password.value){
        alert("两次密码输入不一致")
        return false;
    }
    // 邮箱
    if(email.value === ''){
        alert("邮箱不能为空")
        return false;
    }
    var reg = /(^[1-9]\d{4,10}@qq\.com$)|(^[a-zA-Z]\w{5,17}@((163|126)\.com$)|yeah\.net$)/;
    if(!reg.test(email.value)){
        alert("请输入正确的邮箱")
        return false;
    }
    // 手机号
    if(tel.value === ''){
        alert("手机号不能为空")
        return false
    }
    var reg = /^1[3-9]\d{9}$/;
    if(!reg.test(tel.value)){
        alert("请输入正确的手机号")
        return false
    }
    // 协议 
    //真就是选中了，假就是没选中
    if(!agree.checked){
        alert("请同意协议")
        return false;
    }


    //发送Ajax请求
    var xhr = new XMLHttpRequest();
    // 2.设置对象信息
    xhr.open('post','./php/register.php');
    // 3.监听状态
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            if(xhr.status>=200 && xhr.status<300){
                var res = xhr.responseText;
                // console.log(res);
                if(res == 1){
                    alert("注册成功");
                    //跳转到登录页面
                    location.href = "login.html";
                }else if(res == 2){
                    alert("用户名被占用");
                    //什么都不要干，让用户重新输入
                    return false;
                }else{
                    alert("注册失败");
                    return false;
                }

            }
        }
    }
    // 4.发送
    // 设置请求头，将数据变成表单数据
    xhr.setRequestHeader("content-type",'application/x-www-form-urlencoded')
    // 如果post请求需要添加请求主体，就需要在发送之前先设置请求头

    // 将请求主体当做send方法的参数进行设置
    xhr.send(`username=${username.value}&password=${password.value}&email=${email.value}&tel=${tel.value}&`)
}
